<template>
  <div>
    <el-dialog
      :title="$t('LineManagementLang.InputItem')"
      :visible.sync="Visible"
      width="74%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div style="display:flex; margin-bottom: 5px;gap:10px">
          <div v-if="typeName!=='details'" style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="addItem">
            <img style="width:12px;margin-top: 2px;" src="../../assets/img/add.png" alt="">
            <span>{{$t('common.Add')}}</span>
          </div>
        </div>
        <MyTable
        :tableColumn="tableColumn"
        :tableData="tableData"
        :isOrder="false"
        @sendTabClick="setTabClick"
        >
          <template v-slot:content="scope">
            <span v-if="scope.config.templateType=='Select'">
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-select
                  v-fo-select
                  @change="selectChange(scope.row,scope.config.prop)"
                  @visible-change="inputType"
                  v-model="scope.row[scope.config.prop]"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>  
              </span>
              <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
            </span>
            <span v-else-if="scope.config.templateType=='Select_place'">
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-select
                  v-fo-select
                  @change="selectChange_place(scope.row,scope.config.prop)"
                  @visible-change="inputType"
                  v-model="scope.row[scope.config.prop]"
                >
                  <el-option
                    v-for="item in options_place"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>  
              </span>
              <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
            </span>
            <span v-else>
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label&&scope.config.templateType!='textBtn_del'&&typeName!=='details'">
                <el-input-number v-fo v-noFocu v-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="0" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <el-input-number v-fo v-noFocu v-else-if="scope.config.templateType=='InputNumber_Places'&&scope.row.type===3"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :max="4" :precision="0" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                  <el-input-number v-fo v-noFocu v-else-if="scope.config.templateType=='Text_Places'&&scope.row.type!==2&&scope.row.type!==3"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="1" :max="99" :precision="0" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <el-input
                  v-fo 
                  v-else-if="scope.config.templateType=='Input'"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  v-model="scope.row[scope.config.prop]"
                ></el-input>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
              <span class="btnCLass" v-else-if="scope.config.templateType=='textBtn_del'&&scope.row.is_extend!==0&&typeName!=='details'" @click="delItem(scope.row)">{{$t('LineManagementLang.del')}}</span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </span>
          </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="Previous_step" size="small">{{$t('LineManagementLang.Previous_step')}}</el-button
        >
        <el-button @click="next_step" size="small"
          >{{$t('LineManagementLang.next_step')}}</el-button
        >
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
      Visible: false,
      id:'',
      tableColumn:[
        {
          label: "",
          prop: "table_code",
          width: 40,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.name_zh'),
          prop: "name",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.name_en'),
          prop: "name_en",
          width: 150,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.name_ru'),
          prop: "name_ru",
          width: 150,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.sort'),
          prop: "sort",
          width: 80,
          templateType:'InputNumber',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.type'),
          prop: "type",
          width: 100,
          templateType:'Select',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Decimal_Places'),
          prop: "scale",
          width: 100,
          templateType:'InputNumber_Places',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.text_Places'),
          prop: "text_scale",
          width: 100,
          templateType:'Text_Places',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.place'),
          prop: "position",
          width: 100,
          templateType:'Select_place',
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.operation'),
          prop: "operation",
          width: 80,
          templateType:'textBtn_del'
        },
      ],
      options:[],
      options_place:[],
      tableData:[],
      tabClickIndex:null,
      tabClickLabel:null,
      typeName:'',//判断是否为详情页跳转过来
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(data,name) {
      this.getOptions()
      this.typeName=name
      this.Visible = true;
      this.id=data.id
      this.getData();
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options = res.data.item_type;
        this.options_place = res.data.position;
      });
    },
    //获取单条
    getData() {
      this.$get("lineItems", { id: this.id}).then((res) => {
        this.tableData = res.data;
      });
    },
    addItem(){
      let obj={
        table_code:1,
        name:'',
        name_en:'',
        name_ru:'',
        sort:'',
        type:'',
        type_name:'',
        scale:'',
        text_scale:'',
      }
      this.tableData.push(obj)
      this.tableData.map((item,index)=>{return item.table_code=index+1})
    },
    delItem(row){
      this.tableData=this.tableData.filter(item=>{return item.table_code!==row.table_code})
      this.tableData.map((item,index)=>{return item.table_code=index+1})
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    //下拉框选择初始化
    inputType(type) {
      if(!type){
        this.tabClickIndex = null
        this.tabClickLabel = null    
      }
    },
    selectChange(row,prop){
      row[prop+'_name']=this.options.filter(item=>{return item.id==row[prop]}).length>0?this.options.filter(item=>{return item.id==row[prop]})[0].name:''
      if(row.type!==3){
        row.scale=''
      }
      if(row.type===2){
        row.text_scale=''
      }
    },
    selectChange_place(row,prop){
      row[prop+'_name']=this.options_place.filter(item=>{return item.id==row[prop]}).length>0?this.options_place.filter(item=>{return item.id==row[prop]})[0].name:''
    },
    
    //取消修改
    cancel() {
      this.tableData=[]
      this.Visible = false;
      this.tabClickIndex = null
      this.tabClickLabel = null 
    },
    next_step(){
      if(this.typeName==='details'){
        this.$emit("next_step",this.typeName);
        this.cancel()
        return
      }
      //是否有空值必选项标识
      let type = true;
      let isComplete=true
      let isComplete1=true
      this.tableData.forEach(el=>{
        if(!el.name||!el.name_en||!el.name_ru||(!el.sort&&el.sort!==0)||!el.type){
          type=false
          isComplete=false
        }
        if(el.type===3&&(!el.scale&&el.scale!==0)){
          type=false
          isComplete1=false
        }
        
      })
      if(!isComplete){
        this.$message.warning(this.$t('LineManagementLang.message1'));
      }
      if(!isComplete1){
        this.$message.warning(this.$t('LineManagementLang.message2'));
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("id", this.id);
        params.append("data", JSON.stringify(this.tableData));
        this.$postForm("saveLineItems", params).then((res) => {
          this.confirmTrue = true;
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("next_step");
            this.cancel()
          }
        });
      }
    },
    Previous_step(){
      this.$emit('Previous_step',this.typeName)
      this.cancel()
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  /deep/ .el-dialog__wrapper{
    .el-dialog{
      min-width: 1000px;
    }
  }
</style>